<template>
	<view>
		<view class="search-bar">
			<uni-search-bar :radius="100" v-model="itemSearchKey" @confirm="search"></uni-search-bar>
		</view>
		
		<mescroll-body bottom="60px" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<label class="select-list" v-for="item in list" :key="item.stockId" @click="checkItem(item)">
				<view class="check-cell">
					<checkbox :value="item.stockId" :checked="item.checked" class="check-size" />
				</view>
				<view class="select-content">
					<view class="select-detail">{{$t('material.itemNo')}}：{{ item.itemNo }}</view>
					<view class="select-detail">{{$t('material.itemName')}}：{{ item.itemName }}</view>
					<view class="select-detail">{{$t('material.itemDesc')}}：{{ item.itemDesc }}</view>
					<view class="select-detail">{{$t('material.stockQuantity')}}：{{ item.quantity }}</view>
				</view>
			</label>
		</mescroll-body>

		<view class="select-btn">
			<button type="primary" @click="doSure">{{$t('baseCommon.buttons.confirm')}}</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { list } from '@/api/business/material/stock.js'

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				itemSearchKey: '',
				checkedList: [], //已选择的id
				list: [], //筛选出来的部分
				allList: [], //全部
				checkes: [],
				siteId: ''
			}
		},
		onLoad(params) {
			this.siteId = params.siteId
			this.checkes = params.checkes ? params.checkes.split(",") : []
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let params = {
					itemSearchKey: this.itemSearchKey,
					siteId: this.siteId,
					pageNo: page.num,
					limit: page.size
				}
				list(params).then(res=>{
					let curPageData = res.data.records
					let curPageLen = curPageData.length
					let totalSize = res.data.total
					//设置列表数据
					if(page.num == 1) this.allList = [] //如果是第一页需手动置空列表
					this.allList = this.allList.concat(curPageData) //追加新数据
					
					this.allList.forEach(item => {
						if(this.checkes.indexOf(item.stockId) >= 0) {
							item.checked = true
						} else {
							item.checked = false
						}
					});
					this.checkedList = this.checkes
					this.list = JSON.parse(JSON.stringify(this.allList))
					
					this.mescroll.endBySize(curPageLen, totalSize) 
				})
			},
			search(e) {
				this.itemSearchKey = e.value;
				this.mescroll.resetUpScroll()
			},
			checkItem(item) {
				item.checked = !item.checked
				if(item.checked) {
					if (!this.checkedList.includes(item.stockId)) {
						this.checkedList.push(item.stockId)
					}
				} else {
					this.checkedList.splice(this.checkedList.indexOf(item.stockId), 1)
				}
			},
			doSure() {
				let material = []
				this.checkedList.forEach(itemC => {
					this.allList.forEach(itemA => {
						if (itemC == itemA.stockId) {
							material.push(itemA);
						}
					})
				})

				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectMaterial', material);
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-list.scss';
	
	.search-bar {
		// position: fixed;
		// width: 100%;
	}
</style>
